﻿<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">
	<style type="text/css">
#statusCode {
    padding: 5px;
    border: 1px solid #000;
    background: red;
    text-align: center;
    width: 100px;
}
	</style>
	<script>dojoConfig = { parseOnLoad: true }</script>
	<script src='dojo/dojo/dojo.js'></script>
	
	<script>
	    require(["dojo/dom", "dojo/_base/fx"], function (dom, fx) {
	        statusOk = function () {
	            fx.animateProperty({
	                node: dom.byId("statusCode"), duration: 500,
	                properties: {
	                    backgroundColor: { start: "red", end: "green" },
	                    color: { start: "black", end: "white" },
	                },
	                onEnd: function () {
	                    dom.byId("statusCode").innerHTML = "Granted";
	                }
	            }).play();
	        };
	    });
	</script>
</head>
<body class="claro">
    <p><button onclick="statusOk();">确定</button></p>
<div id="statusCode">颜色变化</div>
</body>
</html>